import { useParams, Link } from "react-router-dom";
import { IngredientService } from "../../../../services/ingredient.service";
import { useState, useEffect } from "react";
import IngredientItem from '../ingredients/ingredient-item/IngredientItem';
//import { cars as carsData } from './screens/home/cars.data.js'
// import { cars as carsData } from '../home/cars.data.js'

const IngredientDetail = () => {

  const { id } = useParams();
  const [ingredient, setIngredient] = useState({});

  useEffect(() => {

    if (!id) return;

    const fetchData = async () => {
      const data = await IngredientService.getById(id);
      setIngredient(data);
    }

    fetchData();
  }, [id]);

  return (
    <>
      <div>IngredientDetail</div>
      <div>
      <Link to='/'>Back</Link>
      <IngredientItem ingredient={ingredient}/>
      </div>
    </>
  );
}

export default IngredientDetail;